import {Component, OnInit, Input, SimpleChanges, OnChanges} from '@angular/core';
import {TurbStatus} from '../../../../entity/turbstatus.model';
import {TurbStatusService} from '../../../../service/turbstatus.service';
import {FarmService} from '../../../../service/farm.service';
import {Farm} from '../../../../entity/farm.model';
import {List} from 'linqts';
import {ApplicationService} from '../../../../service/application.service';
import {Router} from '@angular/router';

import {
  trigger, // 动画封装触发，外部的触发器
  state, // 转场状态控制
  style, // 用来书写基本的样式
  transition, // 用来实现css3的 transition
  animate, // 用来实现css3的animations
  keyframes // 用来实现css3 keyframes的
} from '@angular/animations';
import {fadeIn} from '../../../../../platform/zknwui/core/common/animation/fadeIn-animation';


@Component({
  selector: 'app-turbstatus-panel',
  templateUrl: './turbstatus-panel.component.html',
  styleUrls: ['./turbstatus-panel.component.css'],
  animations: [fadeIn]
})
export class TurbstatusPanelComponent implements OnInit, OnChanges {
  /**
   * echarts实例对象
   *
   * @private
   * @type {*}@memberof RealtimePowerPanelComponent
   */
  private echartsIntance: any;

  public option: object;

  public windShow: boolean = false;

  /**
   * 风机状态统计
   *
   * @type {TurbstatusData[]}@memberof TurbstatusPanelComponent
   */
  @Input()
  totalTurbstatusDatas: TurbstatusData[];
  /**
   * 风机状态统计明细
   *
   * @type {TurbstatusData[]}@memberof TurbstatusPanelComponent
   */
  @Input()
  turbstatusTable: TurbstatusTable;
  /**
   * turbstatus弹窗标题
   *
   * @type {string}
   * @memberof TurbstatusPanelComponent
   */
  @Input()
  title: string = '风机状态';
  @Input()
  orient: string = 'vertical';
  private a = 3;


  private color: string[];

  private datas: NameValue[] = [];
  private legendData: string[] = ['发电', '离线', '待机', '故障', '检修'];
  public url: string;
  private total = 0;

  // 注入服务
  constructor(
    private application: ApplicationService,
    private router: Router
  ) {


  }

  ngOnInit() {
    if (this.title == '风机状态') {
      this.url = 'status.png';
    } else {
      this.url = 'Inverter2.png';
    }

    // console.log(this.totalTurbstatusDatas)
  }

  ngOnChanges(changes: SimpleChanges) {

    if (changes['totalTurbstatusDatas'] && changes['totalTurbstatusDatas'].currentValue) {
      this.legendData = this.totalTurbstatusDatas.map(data => data.name);
      this.changeData();
    }
  }

  private changeData() {
    this.initOption();
  }

  private initOption() {

    const index = this.application.currentUserFarms.findIndex(farm => farm.farmCategory === 'photovoltaic');
    let centerArg: string = '25%';
    let legendTop: string = '50%';
    if (index === -1) {
      //没有光伏
      centerArg = '40%';
      legendTop = '80%';
    }
    if ((this.totalTurbstatusDatas != null || this.totalTurbstatusDatas.length > 0) && this.option == null) {
      this.total = 0;
      this.color = this.totalTurbstatusDatas.map(o => o.color);
      this.totalTurbstatusDatas.forEach(element => {
        this.datas.push({name: element.name, value: parseInt(element.value.toFixed(2))});
        this.total += element.value;
      })
      this.option = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            const c = ((params.value / this.total) * 100).toFixed(2);
            return params.name + ':' + params.value + `(${c}%)`;
          }
        },
        grid: {
          left: 0,
          right: 10,
          top: 40,
          bottom: 20,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              formatter: (d) => {
                return d.split('').join('\n');
              },
              textStyle: {
                color: '#8ee183',
                fontSize: 12,
              },
              interval: 0,
              // rotate:-30
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8DBDC7',
                width: 1,
                type: 'solid'
              }
            },
            splitLine: {
              show: false,

            },
            data: this.legendData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '台',
            splitNumber: 5,
            nameTextStyle: {
              color: '#8ee183'
            }
            , axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#8ee183',
                fontSize: 12,
              }

            },
            splitLine: {
              show: false,

            },
            axisLine: {
              lineStyle: {
                color: '#8DBDC7',
                width: 1,
                type: 'solid'
              }
            }
          }
        ],
        series: [{
          name: '',
          type: 'bar',
          barWidth: 10,
          itemStyle: { //图形样式
            normal: {
              color: (params) => {
                var colorList = this.color;
                return colorList[params.dataIndex]
              }
            }
          },
          data: this.datas,
        }]
      };


    }
  }

  updateEchart() {
    if (this.echartsIntance != null) {
      this.datas.splice(0, this.datas.length);
      this.total = 0;
      this.totalTurbstatusDatas.forEach(element => {
        this.datas.push({name: element.name, value: parseInt(element.value.toFixed(2))});
        this.total += element.value;
      })
      this.echartsIntance.setOption(this.option);
    }
  }

  /**
   * 初始化echarts实例
   *
   *
   * @memberof Echart2Component
   */
  onChartInit(ec: any) {
    this.echartsIntance = ec;
  }

  enterPower() {
    this.windShow = true;
  }

  leavePower() {
    this.windShow = false;
  }

  ondblclick(ev) {
    if (this.title == '风机状态') {
      this.router.navigate(['/monitor/turbmatrix']);
    }


  }

}

export interface NameValue {
  value: number;
  name: string;
}

export class TurbstatusData {
  id: number;
  key: string;
  name: string;
  color: string;
  value: number;
}

export class TurbstatusTable {
  public rows: TurbstatusRow[] = [];
  public title: string[];
}

export class TurbstatusRow {
  public columns: TurbstatusColumn[] = [];
  public farmName: string;
}

export class TurbstatusColumn {
  constructor(
    public value: any,
    public color: string = null,
  ) {
  }
}

